<template>
  <div class="title">店长推荐</div>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    :finished-text="finishedText"
    @load="onLoad"
    class="list"
  >
    <div v-for="(item, index) in list" :key="item" :class="['item', index % 2 === 1 ? 'ml' : '']" @click="toDetail">
      <van-image
        width="100%"
        height="100%"
        :src="'' && 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
        round
        radius="2vw"
        fit="cover"
      />
    </div>
  </van-list>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const props = defineProps({
    num: Number,
  });

  const list = ref([]);
  const loading = ref(false);
  const finished = ref(false);
  const finishedText = computed(() => {
    return props.num ? '' : '没有更多了'
  })

  const onLoad = () => {
    console.log('固定数量', props.num)
    // 传入了固定数量就不继续加载了
    if(props.num) {
      for (let i = 0; i < props.num; i++) {
        list.value.push(list.value.length + 1);
      }
      loading.value = false;
      finished.value = true;
    } else {
      // 无限滚动加载，一直到没有数据
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        // if (list.value.length >= 40) {
        //   finished.value = true;
        // }
      }, 1000);
    } 
  };

  const toDetail = () => {
    router.push('detail')
  }
</script>

<style scoped>
.title {
  padding: 6px;
}

.list {
  padding: 6px;
}

.item {
  width: calc(50vw - 9px);
  height: calc(60vw - 9px);
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item:nth-child(n+3) {
  margin-top: 6px;
}

.item.ml {
  margin-left: 6px;
}
</style>